<template>
  <el-card style="margin-top: 10px;height: 450px">
    <div slot="header">
      <el-row style="padding: 20px 15px 0;height: 50px">
        <!--          销售额访问量柱状图切换按钮-->
        <el-col :span="15">
          <span class="changeBtn" :class="tabFlag==='sale' ? 'active' : ''" style="margin-right: 20px" @click="changeShow('sale')">销售额</span>
          <span class="changeBtn" :class="tabFlag==='inner' ? 'active' : ''" @click="changeShow('inner')">访问量</span>
        </el-col>
        <!--          月周年切换按钮-->
        <el-col :span="4" class="dataChange">
          <span @click="changeDate">今日</span>
          <span @click="changeDate">本月</span>
          <span @click="changeDate">本周</span>
          <span @click="changeDate">本年</span>
        </el-col>
        <!--          日期选择-->
        <el-col :span="5">
          <!--            开始日期和结束日期选择-->
          <el-date-picker
            style="width: 100%"
            v-model="myDate"
            size="mini"
            type="monthrange"
            value-format="yyyy-MM"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-row>
    </div>
    <!--      销售额柱状图和门店销售排名-->
    <el-row>
      <el-col :span="18" style="height: 320px"  v-if="tabFlag === 'sale'">
        <!--          销售额柱状图-->
        <e-chart-component :option="saleNumOption"></e-chart-component>
      </el-col>
      <el-col  :span="18" style="height: 320px"  v-else>
        <e-chart-component :option="fangWenOption"></e-chart-component>
      </el-col>
      <!--        门店销售排名-->
      <el-col :span="6" class="saleRank">
        <h6>门店{{ currentTitle }}排名</h6>
        <el-row style="margin: 10px 0 18px " v-for="rank in eData.userRank" :key="rank.no">
          <el-col :span="3">
            <span
              :class="rank.no==1 || rank.no==2 || rank.no ==3 ? 'top3' : ''"
              style="text-align: center;width: 20px;height: 20px; display: inline-block;"
            >{{ rank.no }}</span>
          </el-col>
          <el-col :span="15">{{ rank.name }}</el-col>
          <el-col :span="6">{{ rank.money }}</el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import EChartComponent from '@/views/EChartComponent'
import {mapState} from "vuex";

export default {
  name: "MainCard",
  components:{
    EChartComponent
  },
  data() {
    return {
      myDate:'', // 收集的日期
      tabFlag: 'sale', // 控制tab栏切换控制类名 sale: 销售额, inner : 访问量
      // 销售额柱状图配置项
      saleNumOption:{
        title: {
          text: '销售额趋势'
        },
        color:['#5c74e0'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: []
          }
        ]
      },
      // 访问数量柱状图的配置项
      fangWenOption:{
        title: {
          text: '访问数量'
        },
        color:['#5c74e0'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [250, 152, 100, 434, 30, 130, 420,110,225,350,270,90]
          }
        ]
      }
    }
  },
  methods:{
    // 改变展示的那一个charts图表
    changeShow(flag) {
      this.tabFlag = flag
    },
    // 改变时间
    changeDate() {
      this.myDate = ['2021-1-11','2021-5-20']
    },
    // 初始化echarts数据
    initData(){
      this.saleNumOption.xAxis[0].data = this.eData.orderFullYearAxis
      this.saleNumOption.series[0].data = this.eData.orderFullYear
      this.fangWenOption.xAxis[0].data = this.eData.userFullYearAxis
      this.fangWenOption.series[0].data = this.eData.userFullYear
    }
  },
  computed:{
    // 门店销售额和访问量
    currentTitle() {
      return this.tabFlag === 'sale' ? '销售额' : '访问量'
    },
    ...mapState('echartsData',['eData'])
  },
  watch:{
    eData: {
      immediate: true,
      deep: true,
      handler() {
        this.initData()
      }
    }
  },
  created() {
    this.initData()
  }
}
</script>

<style scoped>
/*切换按钮*/
.changeBtn {
  font-size: 18px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
}

.changeBtn:hover {
  color: #20a0ff;
}

.active {
  border-bottom: 2px solid #20a0ff;
  color: #20a0ff;
}

>>> .el-card__header {
  margin: 0;
  padding: 0;
}

.dataChange span {
  margin: 0 8px;
  font-size: 14px;
}

.saleRank h6 {
  padding: 0;
  margin: 10px 0 10px 0;
  font-weight: 400;
  font-size: 16px;
}

.saleRank .rankNum {
  display: inline-block;
  margin-right: 15px;
}

.saleRank .top3 {
  border-radius: 20px;
  line-height: 20px;
  background-color: #000;
  color: #ffffff;
}
</style>
